<template>
  <div class="edit-main">
    <left></left>
    <div class="edit-canvas-zone">
      <div class="edit-page-editor">
        <div class="edit-canvas-con" @click.stop="onHiddenPop">
          <canvas-middle></canvas-middle>
        </div>
        <right></right>
      </div>
      <RightTimeLine ></RightTimeLine>
    </div>
  </div>
</template>
<script>
import Left from '@/views/child/Left.vue'
import CanvasMiddle from "@/views/canvas/CanvasMiddle.vue";

import Right from '@/views/child/Right.vue'
import RightTimeLine from '@/views/child/right/right-timeline.vue'

import { mapState, mapActions } from 'vuex'

export default {
  name: "CanvasContent",
  components: {
    Left,
    CanvasMiddle,
    Right,
    RightTimeLine,
  },
  computed: {
    ...mapState({
      siteStatus: state => state.components.siteStatus,
    })
  },
  methods:{
    ...mapActions({
      setRightMenuStatus: "components/setRightMenuStatus",
      hiddenMediaPop: 'hiddenMediaPop',
    }),
    onHiddenPop(){
      this.hiddenMediaPop();
      this.setRightMenuStatus({ isVisible:false, left:0, top:'-1000px'  })
    },
  }
};
</script>

<style lang="scss">
@import '@/assets/css/edit.scss';
@import '@/assets/css/edit-canvas.scss';
</style>